<template>
	<view class="content">
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">行程类型：</text>
					<text class="d_item_right">{{applyDetails.leaveType}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">系部：</text>
					<text class="d_item_right">{{applyDetails.deptParent}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">班级：</text>
					<text class="d_item_right">{{applyDetails.deptName}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">学号：</text>
					<text class="d_item_right">{{applyDetails.empNo}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">联系电话：</text>
					<text class="d_item_right">{{applyDetails.phone}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">开始时间：</text>
					<text class="d_item_right">{{applyDetails.leaveStartTime}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">结束时间：</text>
					<text class="d_item_right">{{applyDetails.leaveEndTime}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">天数：</text>
					<!-- <text class="d_item_right">{{applyDetails.leaveDay}}天</text> -->
					<text class="d_item_right">{{calculate(applyDetails.leaveStartTime, applyDetails.leaveEndTime)}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">是否外出：</text>
					<text class="d_item_right">{{applyDetails.isLeaveOut?'是':'否'}}</text>
				</view>
				<view class="d_item">
					<text class="d_item_left">事由：</text>
					<text class="d_item_right r_txt">{{applyDetails.leaveCause}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">审核状态：</text>
					<view class="d_item_right">
						<image class="result_icon"
							:src="applyDetails.leaveResult == 0?'/static/images/appling.png':applyDetails.leaveResult == 1?'../../static/images/agree.png':'../../static/images/not_agree.png'"
							mode="scaleToFill"></image>
						<text>{{applyDetails.leaveResult == 0?'审批中':applyDetails.leaveResult == 1?'审批通过':'审批拒绝'}}</text>
					</view>
				</view>
				<view class="d_item" v-if="applyDetails.leaveApprove!=null">
					<text class="d_item_left">审批说明：</text>
					<text class="d_item_right r_txt">{{applyDetails.leaveApprove}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">申请时间：</text>
					<text class="d_item_right">{{applyDetails.fillTime}}</text>
				</view>
			</custom-card>
		</view>
		<view class="d_box">
			<custom-card :isShadow="false">
				<view class="d_item">
					<text class="d_item_left">审批进度：</text>
				</view>
				<view class="d_item">
					<uni-steps direction="column" :options="steps" :active="current" :active-color="activeColor"></uni-steps>
				</view>
			</custom-card>
		</view>
		<view class="btn_box" v-if="applyDetails.leaveResult == 0 && (approverId == empId)">
			<button style="margin:20px" class='btn_submit primary' @click="_approve(1)">同意申请</button>
			<button style="margin:20px" class='btn_submit warning' @click="_showPopup">不同意</button>
		</view>
		<custom-modal :isShow="showMcModal" :content="toast" title="温馨提示" :showCancel="true" :inp="false" @ok='_confirm'
			@cancel='_cancel' okBtn='确定' />
		<uni-popup ref="popup" type="bottom">
			<view class="popup_box">
				<view class="popup_header">
					<view class="title">不同意申请</view>
					<view class="describe">
						请填写不同意{{applyDetails.empName}}申请的理由
					</view>
				</view>
				<view class="popup_content">
					<view class="approve_opinion">
						<textarea v-model="approveOpinion" placeholder="请说明拒绝理由" />
					</view>
				</view>
				<view class="btn_box">
					<button style="margin-top:20px" class='btn_submit warning' @click="_approve(0)">提 交</button>
					<button style="margin-top:20px" class='btn_submit' @click="()=>{$refs.popup.close()}">取 消</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let _this
	import customModal from '../../components/custom-modal/custom-modal.vue'
	import {
		approveLeave, //提交审批
		getActivityInfo //审批进度
	} from '../../common/api/index.js';
	import {
		_showLoading,
		datediff
	} from '../../common/js/util.js'
	export default {
		data() {
			return {
				applyDetails: {},
				showMcModal: false,
				toast: '',
				approveOpinion: '',
				steps: [],
				current: 0,
				activeColor: '#FA6400',
				empId: '',
				orgId: '',
				approverId: ''
				
			}
		},
		components: {
			customModal
		},
		onLoad(option) {
			_this = this
			this.applyDetails = JSON.parse(decodeURIComponent(option.detail).replace(/&nbsp;/ig, ""))
			_this.empId = option.empId
			_this.orgId = option.orgId
			_this._getActivityInfo()
		},
		methods: {
			_confirm() {},
			_cancel() {
				_this.showMcModal = false
			},
			_showPopup() {
				_this.$refs.popup.open('top')
			},
			_approve(YN, toast) {
				if (YN == 1) {
					_this.toast = `是否确定同意 ${this.applyDetails.empName} 的行程申请？`
				} else {
					_this.toast = `确认不通过 ${this.applyDetails.empName} 的行程申请？`
				}
				_this.showMcModal = true
				_this._confirm = () => {
					_this._agree(YN)
				}
			},
			_agree(YN) {
				_this.showMcModal = false
				_showLoading('审批提交中...')
				approveLeave({
					orgId: _this.orgId,
					empId: _this.empId,
					// orgId: 4500001,
					// empId: '1383',
					taskId: _this.applyDetails.taskId,
					approveType: YN,
					approveOpinion: _this.approveOpinion
				}).then(res => {
					uni.hideLoading()
					if (res.resultCode == 0) {
						_this.toast = res.resultMsg
						_this.showMcModal = true
						_this._confirm = () => {
							uni.navigateBack({
								delta: 1
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: res.resultMsg,
							duration: 2000
						})
					}
				})
			},
			_getActivityInfo() {
				getActivityInfo({
					processId: _this.applyDetails.processId,
				}).then(res => {
					_this.steps = [{
						title: '请假发起人',
						desc: _this.applyDetails.empName
					}]
					if (res.code == 0 && res.data.length > 0) {
						_this.current = res.data.length
						_this.approverId = res.data[res.data.length - 1].assignee
						res.data.forEach(item => {
							_this.steps.push({
								title: item.activityName,
								desc: (item.name ? item.name : '') +
									`(${item.approveType == 1 ? '同意' : item.approveType == 0 ? '不同意' : '审批中'})`
							})
						})
					}
					if (_this.applyDetails.leaveResult != 0) {
						_this.current = res.data.length + 1
						_this.steps.push({
							title: '申请结果',
							desc: _this.applyDetails.leaveResult == 1 ? '已通过' : '未通过'
						})
						_this.activeColor = _this.applyDetails.leaveResult == 1 ? '#55C976' : '#dd524d'
					}
				})
			},
		},
		computed: {
			calculate(start, end) {
				return function(start, end) {
					start = start.replace(/-/g, "/")
					end = end.replace(/-/g, "/")
					let diff = datediff(start, end)
					let jiaNum = diff % 1 * 24 >= 1 ? (diff % 1 * 24 >= 6 ? (Number.parseInt(diff) + 1) : (Number.parseInt(
					diff) + 0.5)) : Number.parseInt(diff)
					
					if (diff > 1) {
						return jiaNum + "天（" + Number.parseFloat(diff).toFixed(2) + "天）"
					}
					diff = diff * 24
					if (diff > 1) {
						return jiaNum + "天（" + Number.parseFloat(diff).toFixed(2) + "小时）"
					}
					diff = diff * 60
					if (diff > 1) {
						return Number.parseFloat(diff).toFixed(2) + "分钟"
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100vh;
		background-color: #f6f6f6;
		font-family: PingFang-SC-Heavy, PingFang-SC;
	}

	.content {
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		padding: 32rpx;
		padding-bottom: 200rpx;
	}

	.d_box {
		margin-bottom: 20rpx;
	}

	.d_item {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		margin-bottom: 32rpx;

		&:last-child {
			margin-bottom: 0
		}

		.d_item_left {
			display: flex;
			flex: 0 0 170rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #6B707A;
		}

		.d_item_right {
			/* display: flex; */
			display: flex;
			flex-direction: row;
			align-items: center;
			font-weight: 400;
			font-size: 30rpx;
			color: #3C424F;
		}

		.result_icon {
			width: 36rpx;
			height: 36rpx;
			margin-right: 12rpx;
		}

		.r_txt {
			line-height: 50rpx;
		}
	}

	.btn_box {
		height: 200rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.btn_submit {
		width: 300rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-weight: 800;
		background: #999999;
		box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		border-radius: 9rpx;
		color: #FFF;

		&.primary {
			background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
			box-shadow: 0 16rpx 32rpx 0 rgba(36, 98, 255, 0.24);
		}

		&.warning {
			background: linear-gradient(90deg, #dd524d 0%, #cb0036 100%);
			box-shadow: 0 16rpx 32rpx 0 rgba(255, 67, 89, 0.2);
		}
	}

	.popup_box {
		height: 680rpx;
		background-color: #FFF;
		padding: 48rpx;
		margin: 0;
		border-top-left-radius: 48rpx;
		border-top-right-radius: 48rpx;

		.popup_header {
			height: 100rpx;
			text-align: center;
		}

		.title {
			font-weight: 700;
			// line-height: 100rpx;
			font-size: 48rpx;
			color: #333;
		}

		.describe {
			font-size: 22rpx;
			color: #999;
			padding: 12rpx 0;
		}

		.popup_content {
			margin: 24rpx 0;
			.approve_opinion {
				height: 300rpx;
				width: 100%;
				border: 1px solid #ccc;
				border-radius: 12rpx;
				textarea{
					padding: 24rpx;
				}
			}
		}
	}
</style>
